<template>
  <div class="page-container">
    <div class="page-header">
      <h1>추천인 관리</h1>
      <p>추천 관계 및 보상 설정 관리</p>
    </div>

    <div class="page-content">
      <!-- 통계 카드 -->
      <div class="stats-cards" v-if="stats">
        <el-card class="stats-card">
          <div class="stats-item">
            <div class="stats-value">{{ stats.totalReferrers }}</div>
            <div class="stats-label">총 추천인 수</div>
          </div>
        </el-card>
        <el-card class="stats-card">
          <div class="stats-item">
            <div class="stats-value">{{ stats.totalReferred }}</div>
            <div class="stats-label">추천받은 사용자</div>
          </div>
        </el-card>
        <el-card class="stats-card">
          <div class="stats-item">
            <div class="stats-value">{{ stats.todayReferred }}</div>
            <div class="stats-label">금일 신규</div>
          </div>
        </el-card>
        <el-card class="stats-card">
          <div class="stats-item">
            <div class="stats-value">{{ formatAmount(stats.totalRewards + stats.totalStakingRewards) }}</div>
            <div class="stats-label">총 보상 금액</div>
          </div>
        </el-card>
      </div>

      <!-- 검색 영역 -->
      <el-card class="search-card">
        <div class="search-container">
          <div class="search-left">
            <span class="search-label">추천인 목록</span>
          </div>
          <div class="search-right">
            <el-input
              v-model="searchForm.search"
              placeholder="추천 코드, 이름 또는 신분증을 검색하세요"
              class="search-input"
              clearable
              @keyup.enter="handleSearch"
            >
              <template #append>
                <el-button type="primary" @click="handleSearch">검색</el-button>
              </template>
            </el-input>
            <el-button type="success" @click="handleShowSettings" class="settings-btn">
              보상 설정
            </el-button>
          </div>
        </div>
      </el-card>

      <!-- 추천인 목록 -->
      <el-card class="table-card">
        <template #header>
          <div class="table-header">
            <span>추천인 목록</span>
            <el-button
              type="primary"
              size="small"
              :loading="isExporting"
              @click="handleExportExcel"
            >
              Excel 내보내기
            </el-button>
          </div>
        </template>
        <el-table
          v-loading="loading"
          :data="referrerList"
          stripe
          style="width: 100%"
        >
          <el-table-column prop="referralCode" label="추천 코드" width="120">
            <template #default="{ row }">
              <span class="referral-code">{{ row.referralCode || '미생성' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="idNumber" label="신분증" width="180" />
          <el-table-column prop="name" label="이름" width="120" />
          <el-table-column label="추천 수" width="100" align="center">
            <template #default="{ row }">
              <el-tag type="info">{{ row._count.referredUsers }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="추천 사용자 미리보기" min-width="200">
            <template #default="{ row }">
              <div class="referred-users-preview">
                <el-tag
                  v-for="user in row.referredUsers.slice(0, 3)"
                  :key="user.id"
                  size="small"
                  class="user-tag"
                >
                  {{ user.name }}
                </el-tag>
                <span v-if="row._count.referredUsers > 3" class="more-count">
                  +{{ row._count.referredUsers - 3 }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="등록 날짜" width="180">
            <template #default="{ row }">
              {{ formatDate(row.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column label="작업" width="200" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="handleViewDetail(row)">
                하위 회원 보기
              </el-button>
              <el-button type="warning" size="small" @click="handleSetUserRate(row)">
                비율 설정
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 페이지네이션 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.page"
            v-model:page-size="pagination.limit"
            :total="pagination.total"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 추천 사용자 상세 대화상자 -->
    <el-dialog
      v-model="detailDialogVisible"
      :title="`${selectedReferrer?.name || ''}님의 추천 사용자`"
      width="900px"
      :before-close="handleCloseDetail"
    >
      <div v-if="selectedReferrer">
        <div class="referrer-info-card">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="추천 코드">{{ selectedReferrer.referralCode || '미생성' }}</el-descriptions-item>
            <el-descriptions-item label="추천 수">{{ selectedReferrer._count?.referredUsers || detailData?.pagination.total || 0 }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <el-table
          v-loading="detailLoading"
          :data="detailData?.referredUsers || []"
          stripe
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column prop="name" label="이름" width="120" />
          <el-table-column prop="idNumber" label="신분증" width="180" />
          <el-table-column label="계좌 잔액" width="120" align="right">
            <template #default="{ row }">
              <span class="amount">{{ formatAmount(row.balance?.total || 0) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="등록 시간" width="180">
            <template #default="{ row }">
              {{ formatDate(row.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="상태" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusTagType(row.status)">{{ getStatusText(row.status) }}</el-tag>
            </template>
          </el-table-column>
          <!-- 추천인은 작업 열을 볼 수 없습니다 -->
          <el-table-column v-if="!isReferrer" label="작업" width="120" fixed="right">
            <template #default="{ row }">
              <el-button type="danger" size="small" @click="handleRemoveReferral(row)">
                관계 해제
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 추천 사용자 페이지네이션 -->
        <div class="pagination-container" v-if="detailData?.pagination">
          <el-pagination
            v-model:current-page="detailPagination.page"
            v-model:page-size="detailPagination.limit"
            :total="detailData.pagination.total"
            :page-sizes="[10, 20, 50]"
            layout="total, sizes, prev, pager, next"
            @size-change="handleDetailSizeChange"
            @current-change="handleDetailPageChange"
          />
        </div>
      </div>
    </el-dialog>

    <!-- 보상 설정 대화상자 -->
    <el-dialog
      v-model="settingsDialogVisible"
      title="추천 보상 설정"
      width="700px"
      :before-close="handleCloseSettings"
    >
      <div class="settings-content" v-if="settings">
        <!-- 전역 설정 -->
        <div class="settings-section">
          <h3>전역 기본 설정</h3>
          <el-form :model="globalSettingsForm" label-width="120px">
            <el-form-item label="충전 추천 비율">
              <div class="rate-input-group">
                <el-input-number
                  v-model="globalSettingsForm.depositRate"
                  :min="0"
                  :max="100"
                  :precision="4"
                  :step="0.01"
                  class="rate-input"
                />
                <span class="rate-unit">%</span>
              </div>
              <div class="form-hint">사용자가 충전할 때 추천인이 받는 보상 비율</div>
            </el-form-item>
            <el-form-item label="수익금 비율">
              <div class="rate-input-group">
                <el-input-number
                  v-model="globalSettingsForm.stakingRate"
                  :min="0"
                  :max="100"
                  :precision="4"
                  :step="0.01"
                  class="rate-input"
                />
                <span class="rate-unit">%</span>
              </div>
              <div class="form-hint">피추천인의 일일 수익 중 추천인이 받는 보상 비율 (예: 10%)</div>
            </el-form-item>
            <el-form-item label="사용 상태">
              <el-switch v-model="globalSettingsForm.isActive" />
            </el-form-item>
          </el-form>
          <div class="settings-actions">
            <el-button type="primary" @click="handleUpdateGlobalSettings" :loading="settingsLoading">
              전역 설정 저장
            </el-button>
          </div>
        </div>

        <!-- 사용자별 설정 -->
        <div class="settings-section">
          <h3>사용자별 설정</h3>
          <el-table :data="settings.users" stripe style="width: 100%">
            <el-table-column label="사용자">
              <template #default="{ row }">
                <div>
                  <div class="user-name">{{ row.user?.name || '알 수 없는 사용자' }}</div>
                  <div class="referral-code">{{ row.user?.referralCode || '추천 코드 없음' }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="충전 비율" width="120">
              <template #default="{ row }">
                {{ (row.depositRate * 100).toFixed(4) }}%
              </template>
            </el-table-column>
            <el-table-column label="수익금 비율" width="120">
              <template #default="{ row }">
                {{ (row.stakingRate * 100).toFixed(4) }}%
              </template>
            </el-table-column>
            <el-table-column label="상태" width="80">
              <template #default="{ row }">
                <el-tag :type="row.isActive ? 'success' : 'danger'">
                  {{ row.isActive ? '사용' : '미사용' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="작업" width="100">
              <template #default="{ row }">
                <el-button type="danger" size="small" @click="handleDeleteUserSettings(row.user?.id)">
                  삭제
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <template #footer>
        <el-button @click="handleCloseSettings">닫기</el-button>
      </template>
    </el-dialog>

    <!-- 사용자 비율 설정 대화상자 -->
    <el-dialog
      v-model="userRateDialogVisible"
      :title="`${selectedReferrer?.name || ''}님의 추천 비율 설정`"
      width="500px"
    >
      <el-form :model="userRateForm" label-width="120px">
        <el-form-item label="충전 추천 비율">
          <div class="rate-input-group">
            <el-input-number
              v-model="userRateForm.depositRate"
              :min="0"
              :max="100"
              :precision="4"
              :step="0.01"
              class="rate-input"
            />
            <span class="rate-unit">%</span>
          </div>
        </el-form-item>
        <el-form-item label="수익금 비율">
          <div class="rate-input-group">
            <el-input-number
              v-model="userRateForm.stakingRate"
              :min="0"
              :max="100"
              :precision="4"
              :step="0.01"
              class="rate-input"
            />
            <span class="rate-unit">%</span>
          </div>
        </el-form-item>
        <el-form-item label="사용 상태">
          <el-switch v-model="userRateForm.isActive" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="userRateDialogVisible = false">취소</el-button>
        <el-button type="primary" @click="handleSaveUserRate" :loading="settingsLoading">
          설정 저장
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ReferralService } from '@/api/referral';
import type {
  Referrer,
  ReferrerDetailResponse,
  ReferralSettingsResponse,
  ReferralStats,
  ReferralSearchParams,
  ReferredUser
} from '@/types/referral';
import { exportToExcel, formatDateTimeString } from '@/utils/exportExcel'
import type { ExportHeader } from '@/utils/exportExcel'

// 권한 판단: 추천인 로그인 여부 확인
const isReferrer = computed(() => {
  const userType = localStorage.getItem('admin_user_type');
  return userType === 'USER';
});

// 반응형 데이터
const loading = ref(false);
const isExporting = ref(false);
const detailLoading = ref(false);
const settingsLoading = ref(false);

const referrerList = ref<Referrer[]>([]);
const selectedReferrer = ref<Referrer | null>(null);
const detailData = ref<ReferrerDetailResponse | null>(null);
const settings = ref<ReferralSettingsResponse | null>(null);
const stats = ref<ReferralStats | null>(null);

// 대화상자 상태
const detailDialogVisible = ref(false);
const settingsDialogVisible = ref(false);
const userRateDialogVisible = ref(false);

// 검색 폼
const searchForm = reactive({
  search: ''
});

// 페이지네이션 데이터
const pagination = reactive({
  page: 1,
  limit: 20,
  total: 0,
  totalPages: 0
});

const detailPagination = reactive({
  page: 1,
  limit: 20
});

// 설정 폼
const globalSettingsForm = reactive({
  depositRate: 0,
  stakingRate: 0,
  isActive: true
});

const userRateForm = reactive({
  depositRate: 0,
  stakingRate: 0,
  isActive: true
});

// 추천인 목록 로드
const loadReferrerList = async () => {
  try {
    loading.value = true;
    const params: ReferralSearchParams = {
      page: pagination.page,
      limit: pagination.limit,
      search: searchForm.search.trim() || undefined
    };

    const result = await ReferralService.getReferrerList(params);
    referrerList.value = result.referrers;
    Object.assign(pagination, result.pagination);
  } catch (error) {
    console.error('추천인 목록 로드 실패:', error);
    ElMessage.error('추천인 목록을 불러오지 못했습니다');
  } finally {
    loading.value = false;
  }
};

// Excel 내보내기
const handleExportExcel = async () => {
  try {
    isExporting.value = true;

    // 构建导出参数（与当前筛选条件一致）
    const params: any = {
      exportAll: 'true', // 导出全部数据
      search: searchForm.search.trim() || undefined
    };

    // 调用API获取全部数据
    const result = await ReferralService.getReferrerList(params);

    if (!result.referrers || result.referrers.length === 0) {
      ElMessage.warning('내보낼 데이터가 없습니다');
      return;
    }

    // 定义导出的列
    const headers: ExportHeader[] = [
      { label: '추천 코드', prop: 'referralCode' },
      { label: '신분증', prop: 'idNumber' },
      { label: '이름', prop: 'name' },
      { label: '추천 수', prop: '_count.referredUsers' },
      {
        label: '등록 날짜',
        prop: 'createdAt',
        formatter: (val) => formatDateTimeString(val)
      }
    ];

    // 导出Excel
    exportToExcel({
      fileName: '추천인관리',
      headers,
      data: result.referrers,
      sheetName: '추천인 목록'
    });

    ElMessage.success(`${result.referrers.length}건의 데이터를 성공적으로 내보냈습니다`);
  } catch (error) {
    console.error('Excel 내보내기 실패:', error);
    ElMessage.error('Excel 내보내기에 실패했습니다');
  } finally {
    isExporting.value = false;
  }
};

// 통계 데이터 로드
const loadStats = async () => {
  try {
    stats.value = await ReferralService.getReferralStats();
  } catch (error) {
    console.error('통계 데이터 로드 실패:', error);
  }
};

// 검색 처리
const handleSearch = () => {
  pagination.page = 1;
  loadReferrerList();
};

// 페이지 전환 처리
const handlePageChange = (page: number) => {
  pagination.page = page;
  loadReferrerList();
};

const handleSizeChange = (size: number) => {
  pagination.limit = size;
  pagination.page = 1;
  loadReferrerList();
};

// 추천 사용자 상세 보기
const handleViewDetail = async (referrer: Referrer) => {
  try {
    selectedReferrer.value = referrer;
    detailPagination.page = 1;
    detailPagination.limit = 20;
    await loadReferrerDetail();
    detailDialogVisible.value = true;
  } catch (error) {
    console.error('추천 사용자 상세 조회 실패:', error);
    ElMessage.error('추천 사용자 상세 정보를 불러오지 못했습니다');
  }
};

// 추천 사용자 상세 데이터 로드
const loadReferrerDetail = async () => {
  if (!selectedReferrer.value) return;

  try {
    detailLoading.value = true;
    const result = await ReferralService.getReferrerDetail(selectedReferrer.value.id, {
      page: detailPagination.page,
      limit: detailPagination.limit
    });
    detailData.value = result;
  } catch (error) {
    console.error('추천 사용자 상세 데이터 로드 실패:', error);
    ElMessage.error('추천 사용자 상세 데이터를 불러오지 못했습니다');
  } finally {
    detailLoading.value = false;
  }
};

// 상세 페이지 처리
const handleDetailPageChange = (page: number) => {
  detailPagination.page = page;
  loadReferrerDetail();
};

const handleDetailSizeChange = (size: number) => {
  detailPagination.limit = size;
  detailPagination.page = 1;
  loadReferrerDetail();
};

// 상세 대화상자 닫기
const handleCloseDetail = () => {
  detailDialogVisible.value = false;
  selectedReferrer.value = null;
  detailData.value = null;
};

// 설정 대화상자 표시
const handleShowSettings = async () => {
  try {
    settings.value = await ReferralService.getReferralSettings();

    // 전역 설정 폼 구성
    const global = settings.value.global;
    globalSettingsForm.depositRate = Number((global.depositRate * 100).toFixed(4));
    globalSettingsForm.stakingRate = Number((global.stakingRate * 100).toFixed(4));
    globalSettingsForm.isActive = global.isActive;

    settingsDialogVisible.value = true;
  } catch (error) {
    console.error('추천 설정 조회 실패:', error);
    ElMessage.error('추천 설정을 불러오지 못했습니다');
  }
};

// 전역 설정 갱신
const handleUpdateGlobalSettings = async () => {
  try {
    settingsLoading.value = true;
    await ReferralService.updateGlobalSettings({
      depositRate: globalSettingsForm.depositRate / 100,
      stakingRate: globalSettingsForm.stakingRate / 100,
      isActive: globalSettingsForm.isActive
    });
    ElMessage.success('전역 설정을 성공적으로 저장했습니다');

    // 설정 재로딩
    await handleShowSettings();
  } catch (error) {
    console.error('전역 설정 저장 실패:', error);
    ElMessage.error('전역 설정 저장에 실패했습니다');
  } finally {
    settingsLoading.value = false;
  }
};

// 사용자별 설정 삭제
const handleDeleteUserSettings = async (userId: number) => {
  try {
    await ElMessageBox.confirm('해당 사용자의 개별 설정을 삭제하시겠습니까? 삭제 후에는 전역 기본 설정이 적용됩니다.', '삭제 확인', {
      confirmButtonText: '확인',
      cancelButtonText: '취소',
      type: 'warning'
    });

    await ReferralService.deleteUserSettings(userId);
    ElMessage.success('사용자 설정을 삭제했습니다');

    // 설정 재로딩
    await handleShowSettings();
  } catch (error) {
    if (error !== 'cancel') {
      console.error('사용자 설정 삭제 실패:', error);
      ElMessage.error('사용자 설정 삭제에 실패했습니다');
    }
  }
};

// 설정 대화상자 닫기
const handleCloseSettings = () => {
  settingsDialogVisible.value = false;
};

// 사용자 비율 설정
const handleSetUserRate = (referrer: Referrer) => {
  selectedReferrer.value = referrer;

  // 폼 리셋
  userRateForm.depositRate = 0.5;
  userRateForm.stakingRate = 1.0;
  userRateForm.isActive = true;

  userRateDialogVisible.value = true;
};

// 사용자 비율 설정 저장
const handleSaveUserRate = async () => {
  if (!selectedReferrer.value) return;

  try {
    settingsLoading.value = true;
    await ReferralService.setUserSettings({
      userId: selectedReferrer.value.id,
      depositRate: userRateForm.depositRate / 100,
      stakingRate: userRateForm.stakingRate / 100,
      isActive: userRateForm.isActive
    });

    ElMessage.success('추천 비율 설정을 저장했습니다');
    userRateDialogVisible.value = false;

    // 설정 재로딩(설정 대화상자가 열려 있는 경우)
    if (settingsDialogVisible.value) {
      await handleShowSettings();
    }
  } catch (error) {
    console.error('추천 비율 설정 실패:', error);
    ElMessage.error('추천 비율 설정에 실패했습니다');
  } finally {
    settingsLoading.value = false;
  }
};

// 解除推荐关系
const handleRemoveReferral = async (user: ReferredUser) => {
  try {
    await ElMessageBox.confirm(
      `정말로 ${user.name}님의 추천 관계를 해제하시겠습니까? 이 작업은 되돌릴 수 없습니다.`,
      '추천 관계 해제 확인',
      {
        confirmButtonText: '확인',
        cancelButtonText: '취소',
        type: 'warning'
      }
    );

    await ReferralService.removeReferralRelation({
      userId: user.id
    });

    ElMessage.success(`${user.name}님의 추천 관계가 해제되었습니다`);

    // 推荐用户详情数据重新加载
    await loadReferrerDetail();

    // 推荐人列表数据重新加载
    await loadReferrerList();
  } catch (error) {
    if (error !== 'cancel') {
      console.error('추천 관계 해제 실패:', error);
      ElMessage.error('추천 관계 해제에 실패했습니다');
    }
  }
};

// 금액 포맷
const formatAmount = (amount: number) => {
  return new Intl.NumberFormat('ko-KR').format(amount);
};

// 날짜 포맷
const formatDate = (dateString: string | Date) => {
  if (!dateString) return '유효하지 않은 날짜';

  const date = new Date(dateString);
  if (isNaN(date.getTime())) return '유효하지 않은 날짜';

  return date.toLocaleString('ko-KR', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 상태 태그 유형 반환
const getStatusTagType = (status: string) => {
  const types: Record<string, string> = {
    ACTIVE: 'success',
    INACTIVE: 'info',
    SUSPENDED: 'warning',
    DELETED: 'danger'
  };
  return types[status] || 'info';
};

// 상태 텍스트 반환
const getStatusText = (status: string) => {
  const texts: Record<string, string> = {
    ACTIVE: '정상',
    INACTIVE: '미활성',
    SUSPENDED: '일시 중지',
    DELETED: '삭제됨'
  };
  return texts[status] || status;
};

// 컴포넌트 마운트 시 데이터 로드
onMounted(() => {
  loadReferrerList();
  loadStats();
});
</script>

<style scoped lang="scss">
.page-container {
  padding: 24px;
  background-color: #f5f5f5;
}

.page-header {
  margin-bottom: 24px;

  h1 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
  }

  p {
    font-size: 14px;
    color: #666;
    margin: 0;
  }
}

.page-content {
  .stats-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;

    .stats-card {
      .stats-item {
        text-align: center;
        padding: 20px;

        .stats-value {
          font-size: 32px;
          font-weight: 700;
          color: #1890ff;
          margin-bottom: 8px;
          line-height: 1;
        }

        .stats-label {
          font-size: 14px;
          color: #666;
          margin: 0;
        }
      }
    }
  }

  .search-card {
    margin-bottom: 16px;

    .search-container {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .search-left {
        .search-label {
          font-weight: 500;
          color: #333;
        }
      }

      .search-right {
        display: flex;
        gap: 12px;
        align-items: center;

        .search-input {
          width: 400px;
        }

        .settings-btn {
          white-space: nowrap;
        }
      }
    }
  }

  .table-card {
    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 500;
      color: #333;
    }

    .referral-code {
      font-family: 'Monaco', 'Consolas', monospace;
      background: #f0f0f0;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
    }

    .referred-users-preview {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: center;

      .user-tag {
        font-size: 12px;
      }

      .more-count {
        font-size: 12px;
        color: #666;
        margin-left: 4px;
      }
    }

    .amount {
      font-family: 'Consolas', 'Monaco', monospace;
      font-weight: 500;
    }

    .pagination-container {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  }
}

// 대화상자 스타일
.referrer-info-card {
  margin-bottom: 20px;
}

.settings-content {
  .settings-section {
    margin-bottom: 30px;

    h3 {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin: 0 0 16px 0;
      padding-bottom: 8px;
      border-bottom: 2px solid #f0f0f0;
    }

    .rate-input-group {
      display: flex;
      align-items: center;
      gap: 8px;

      .rate-input {
        width: 160px;
      }

      .rate-unit {
        font-size: 14px;
        color: #666;
      }
    }

    .form-hint {
      font-size: 12px;
      color: #999;
      margin-top: 4px;
      line-height: 1.4;
    }

    .settings-actions {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid #f0f0f0;
    }

    .user-name {
      font-weight: 500;
      color: #333;
      font-size: 14px;
    }

    .referral-code {
      font-family: 'Monaco', 'Consolas', monospace;
      font-size: 12px;
      color: #666;
      margin-top: 2px;
    }
  }
}

// 반응형 디자인
@media (max-width: 1200px) {
  .page-content .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .page-container {
    padding: 16px;
  }

  .page-content {
    .stats-cards {
      grid-template-columns: 1fr;
    }

    .search-card .search-container {
      flex-direction: column;
      gap: 16px;
      align-items: stretch;

      .search-right {
        .search-input {
          width: 100%;
        }
      }
    }
  }
}

// 전역 스타일 오버라이드
:deep(.el-table) {
  font-size: 13px;

  .el-table__header {
    background-color: #f8f9fa;

    th {
      background-color: #f8f9fa !important;
      color: #666;
      font-weight: 500;
    }
  }

  .el-table__row {
    &:hover {
      background-color: #f5f7fa;
    }
  }
}

:deep(.el-button--small) {
  font-size: 12px;
  padding: 4px 8px;
}

:deep(.el-dialog__body) {
  max-height: 70vh;
  overflow-y: auto;
}
</style>
